
<template>
  <div class="boxleft">
    <div class="user_Overview flex" v-if="pageflag">
      <div class="title-header">
        <span>温度：</span>
        <span style="color: #dab474; font-size: 20px; font-weight: 700">21.80</span>
        <span> ℃</span>
      </div>
      <div class="title-header">
        <span>湿度：</span>
        <span style="color: #74d691; font-size: 20px;font-weight: 700">21.80</span>
        <span>%</span>
      </div>
    </div>
    <div class="chartleft" id="chartleft"></div>
  </div>

  
</template>

<script>
// import { currentGET } from 'api/modules'
import * as echarts from 'echarts';
let style = {
  fontSize: 24
}
export default {
  data() {
    return {
      options: {},
      userOverview: {
        alarmNum: 0,
        offlineNum: 0,
        onlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null,
      config: {
        number: [100],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
      onlineconfig: {
        number: [0],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#07f7a8",
          fill: "#07f7a8",
        },
      },
      offlineconfig: {
        number: [0],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#e3b337",
          fill: "#e3b337",
        },
      },
      laramnumconfig: {
        number: [0],
        content: '{nt}',
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#f5023d",
        },
      }

    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData()
  },
  mounted() {
    this.initcharts()
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    initcharts() {
      var chartDom = document.getElementById('chartleft');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross'
          // },
          formatter: function (params) {
            var content = '';
            params.forEach(function (item) {
              content += item.seriesName + ': ' + item.value + '<br>';
            });
            return content;
          }
        },
        grid: {
          left: 30,
          right: 30,
          bottom: 30,
          containLabel: true
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['20:00', '20:30', '21:00', '21:30', '22:00'],
          axisLabel: {
            color: '#fff' // 设置标签颜色为淡蓝色
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '温度（℃）',
            position: 'left', // 左侧轴
            axisLabel: {
              formatter: '{value} ℃',
              textStyle: {
                color: '#fff' // 设置坐标轴标签颜色
              }
            },
            axisTick: {
                show: false
              },
            axisLine: {
              show: false, // 显示坐标轴线
              lineStyle: {
                color: '#ccc' // 设置坐标轴线颜色
              }
            },
            //...其他配置省略
          },
          {
            type: 'value',
            name: '湿度（%）',
            position: 'right',
            axisLabel: {
              formatter: '{value} %',
              color: '#fff',
              show: true,
                position: 'right'

            },
            axisLine: {
              show: false, // 显示坐标轴线
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            index:0,
            name: '湿度',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 0],
            smooth: true, // 设置为平滑曲线
            symbol: 'none', // 隐藏拐点图标
            lineStyle: {
              color: '#70bc8a',
              width: 3 // 设置线条宽度
            },
            areaStyle: {
              color: 'rgb(244, 195, 113, 0.4)' // 设置线条以下内容的填充颜色为红色的透明度为0.3
            },
          },
          {
            index:1,
            name: '温度',
            type: 'line',
            data: [1, 3, 7, 8, 9, 2, 0],
            smooth: true, // 设置为平滑曲线
            symbol: 'none', // 隐藏拐点图标
            lineStyle: {
              color: '#fac972',
              width: 3 // 设置线条宽度
            },
            yAxisIndex: 1, 
            areaStyle: {
              color: 'rgb(91, 175, 121, 0.4)' // 设置线条以下内容的填充颜色为红色的透明度为0.3
            },
          }
        ]
      };

      option && myChart.setOption(option);

    },
    getData() {
      this.pageflag = true;
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
  },
};
</script>
<style lang='scss' scoped>
.boxleft {
  width: 100%;

  .user_Overview {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;

  }

  .chartleft {
    width: 100%;
    height: 230px;
  }
}
</style>
